<style scoped>
/*通过设定或者继承父级以下变量修改样式
  --icon-img-size: 1em;
  --icon-img-color: var(--color-primary);
  --icon-img-color-disable: var(--color-bg-re-1);
  --icon-img-color-badge: var(--color-error-re);
  --icon-img-color-badge-bg: var(--color-error);
  --icon-img-color-badge-size: 11px;
*/

.icon-img{
  position: relative;
  display: inline-block;
  line-height: 1;
  color: var(--icon-img-color, var(--color-primary));
  font-size: var(--icon-img-size, 1em);
}
.icon-img[disable="1"]{color: var(--icon-img-color-disable, var(--color-bg-re-1));}

.icon-img img{display: block;width: 1em;height: 1em;object-fit: cover;}
.icon-img img.contain{object-fit: contain;}
.icon-img img.round{border-radius: .16em;}
.icon-img[disable="1"] img{filter: grayscale(100%);}

.badge{
  font-style: initial;
  position: absolute;top: 0;right: 0;
  font-size: var(--icon-img-color-badge-size, 0.11rem);
  border-radius: 0.6em;line-height: 1.2em;padding: 0 .3em;
  transform: translate(40%,-40%);
  color: var(--icon-img-color-badge, var(--color-error-re));
  background: var(--icon-img-color-badge-bg, var(--color-error));
}
.badge.point{width: .8em; height: .8em;border-radius: 50%;}
</style>
<template>
  <i class="icon-img" ref="main" :disable="disable?1:0" :ico="icon_name" :class="class_name">
    <img-referrer v-if="!is_ico" :class="{contain:contain, round:round}" :src="img_src" draggable="false" @error="$emit('error',$event)"/>

    <template v-if="badge">
      <span v-if="badge===true" class="badge point"></span>
      <span v-else class="badge">{{badge}}</span>
    </template>
  </i>
</template>

<script>
import '@/assets/iconfont.css';
import '@/assets/vant-icon.css';
import {_href, _url_static} from "@/js/s94_tool.js";
import ImgReferrer from "@/components/widget/ImgReferrer.vue";

export default {
  name: "icon-img",
  _css_var_: {
    '--icon-img-size': '1em;',
    '--icon-img-color': 'var(--color-primary);',
    '--icon-img-color-disable': 'var(--color-bg-re-1);',
    '--icon-img-color-badge': 'var(--color-error-re);',
    '--icon-img-color-badge-bg': 'var(--color-error);',
    '--icon-img-color-badge-size': '11px;',
  },
  components: {ImgReferrer},
  props: {
    value: String,
    disable: Boolean,
    badge: [String, Number, Boolean],
    contain: Boolean,
    round: Boolean,
  },
  emits: ['error'],
  data(){
    return {
      is_ico: false,

      img_src: '',
      icon_name: '',
      class_name: '',
      size: 0,
    }
  },
  methods: {
    display(){
      this.is_ico = !/\//.test(this.value) && /\040/.test(this.value);
      this.img_src = '';
      this.icon_name = '';
      this.class_name = '';
      if (this.is_ico){
        let arr = this.value.split(' ');
        this.icon_name = arr[0];
        this.class_name = arr[1] || '';
      }else {
        this.img_src = _url_static(this.value);
      }
    },
    set_width(cr){
      const target = this.$refs.main;
      if (!target) return;
      cr = cr || target.getBoundingClientRect();
      let w = Number(cr.width);
      let h = Number(cr.height);
      let size = Math.abs(w-this.size) > Math.abs(h-this.size) ? w : h;
      if (size > 0) {
        this.size = size;
        target.style.fontSize = size+'px';
      }
    },
  },
  watch: {
    value(){
      this.display();
    },
  },
  mounted() {
    this.display();

    // const resizeObserver = new ResizeObserver(entries => {
    //   for (let entry of entries) {
    //     this.set_width(entry.contentRect);
    //   }
    // });
    // resizeObserver.observe(this.$refs.main);
  }
}
</script>